<template>
  <div class="echarts_box">
    <div class="echarts_box" ref="echarts_box" :style="{ opacity: data.length == 0 ? '0' : '1' }"></div>
    <!---------------------- 无数据是显示 ---------------------->
    <Nodata class="Nodata" v-show="data.length == 0"></Nodata>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  props: {
    data: {
      // 返回的数据
      type: Array | Object,
      default: function () {
        return [];
      },
    },
    color: {
      // 颜色数据
      type: Array | Object,
    },
    rotate: {
      // X轴是否旋转
      type: Number | String,
      default: 0,
    },
    yAxisLabel: {
      // Y轴是否显示
      type: Boolean,
      default: false,
    },
    topNumber: {
      // X轴上方显示数值
      type: Boolean,
      default: false,
    },
    gridRight: {
      // 整体距离右边距
      type: Number | String,
      default: "4%",
    },
    legend: {
      // legend是否显示
      type: Boolean,
      default: false,
    },
    splitLine: {
      // Y轴横线是否显示
      type: Boolean,
      default: false,
    },
    isIndex: {
      // X轴是否显示下标
      type: Boolean,
      default: false,
    },
    gridBottom: {
      // 整体距离下边距
      type: Number | String,
      default: "18%",
    },
  },
  computed: {
    ...mapGetters(["echartsColor"]),
  },
  watch: {
    rotate: "drawLine", // 数值变化是更新图表
    yAxisLabel: "drawLine", // 数值变化是更新图表
    topNumber: "drawLine", // 数值变化是更新图表
    rotate: "drawLine", // 数值变化是更新图表
    gridRight: "drawLine", // 数值变化是更新图表
    legend: "drawLine", // 数值变化是更新图表
    splitLine: "drawLine", // 数值变化是更新图表
    gridBottom: "drawLine", // 数值变化是更新图表
    isIndex: "drawLine", // 数值变化是更新图表
    echartsColor: "drawLine", // 数值变化是更新图表
    data: "drawLine", // 数值变化是更新图表
  },
  mounted() {},
  methods: {
    drawLine() {
      try {
        this.$nextTick(() => {
          var _this = this;
          var myChart = _this.$echarts.init(_this.$refs.echarts_box);
          var xData = [];
          var yData = [];
          var MoreData = [];
          let temp = 1;
          for (let i in this.data) {
            if (this.isIndex == true) {
              xData.push(Number(i) + Number(1) + ". " + this.data[i].name);
            } else {
              xData.push(this.data[i].name);
            }
            yData.push(this.data[i].value);
          }
          var num = Math.max(...yData);
          for (let k of this.data) {
            MoreData.push(1.5 * num);
          }
          let option = {
            tooltip: {
              trigger: "axis",
              // axisPointer: {
              //   type: "shadow",
              // },
              formatter: "{b}:{c}",
            },
            grid: {
              top: "18%",
              right: "3%",
              left: "8%",
              bottom: this.gridBottom,
            },
            xAxis: [
              {
                type: "category",
                data: xData,
                axisLine: {
                  show: true,
                  lineStyle: { color: "rgba(191,191,191,0.8)" },
                },
                axisTick: { show: false },
                axisLabel: {
                  margin: 10,
                  color: this.echartsColor,
                  textStyle: {
                    fontSize: 11,
                  },
                  // formatter: (params) => {
                  //   // "{1}";
                  //   temp++
                  //   console.log(temp)
                  //   return temp+params
                  //   console.log(params)
                  // },
                  rotate: this.rotate,
                },
              },
              {
                type: "category",
                axisLine: { show: false },
                axisTick: { show: false },
                axisLabel: {
                  show: this.topNumber,
                  textStyle: {
                    fontSize: 11,
                    color: "#2BDDF1",
                    // lineHeight: 100,
                  },
                },
                splitArea: { show: false },
                splitLine: { show: false },
                data: yData,
              },
            ],
            yAxis: [
              {
                axisLabel: {
                  show: false,
                  formatter: "{value}",
                  color: "#e2e9ff",
                },
                axisTick: { show: false },
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: this.echartsColor,
                    fontSize: 11,
                  },
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: "rgba(255,255,255,0.12)",
                  },
                },
              },
            ],
            series: [
              {
                type: "bar",
                data: yData,
                barWidth: "12",
                itemStyle: {
                  normal: {
                    color: new _this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "#2C76BF", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#2C76BF", // 100% 处的颜色
                        },
                      ],
                      false
                    ),
                    barBorderRadius: [0],
                    // shadowColor: "rgba(0,160,221,1)",
                    shadowBlur: 0,
                  },
                },
              },
              {
                name: "",
                type: "bar",
                barWidth: 12,
                barGap: "-100%",
                data: MoreData,
                z: -1,
                itemStyle: {
                  normal: {
                    color: "#8AC5FF",
                    barBorderRadius: 0,
                  },
                },
              },
            ],
          };

          myChart.setOption(option);
          myChart.off("click");
          /* 点击事件 */
          myChart.on("click", (params) => {});
          /* 大小自适应 */
          window.addEventListener("resize", function () {
            myChart.resize();
          });
          myChart.resize();
        });
      } catch (e) {
        console.log(e);
        // 错误处理代码片段
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts_box {
  width: 100%;
  height: 100%;
  position: relative;
  .Nodata {
    position: absolute;
    top: 0;
    z-index: 10;
  }
}
</style>